<script>
export default {
  name: 'ShowDetails',
  props: {
    dataObj: Object
  },
  data(){
    return{
      mapPerson:[
        {
          name: '姓名',
          key:'nameNew'
        },
        {
          name: '年龄',
          key:'age'
        },
        {
          name: '职位',
          key:'job'
        },
        {
          name: '地址',
          key:'address'
        },
        {
          name: '工作年份',
          key:'jobYear'
        },
        {
          name: '到期时间',
          key:'date'
        }
      ]
    }
  }
}
</script>

<template>
  <div>
    <div class="title_person">在 职 人 员 信 息 一 览 表</div>
    <div class="box">
      <div v-for="item in mapPerson" :key="item.id" class="item_person">
        <div class="label_person">{{item.name}}</div>
        <div>：</div>
        <div class="value_person">{{dataObj[item.key] || ' -'}}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title_person{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  font-weight: 500;
}

.box{
  display: flex;
  justify-self: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 120px;
}

.item_person{
  display: flex;
  justify-self: center;
  align-items: center;
  width: 30%;
}

.label_person{
  font-size: 16px;
  color: #000000;
}

.value_person{
  font-size: 14px;
  color: #3e3e3e;
}
</style>